<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="module">
        // 要素
        // 场景
        // 相机
        // 渲染器
        // 几何体
        // 材质
        // 网格

        import * as THREE from 'three';

        // 创建场景
        const scene = new THREE.Scene();
        // scene.background = new THREE.Color(0xffffff);
        // scene.background = new THREE.Color("rgba(55, 55, 255, 0.5)");
        // scene.background = new THREE.Color("hsl(40, 100%, 50%)");

        const loader = new THREE.TextureLoader();
        const texture = loader.load("./images/img1.jpg", function (texture) {
            // console.log(texture);
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            // texture.repeat.set(2, 2);
            scene.background = texture;

            // 渲染场景，因为是异步的，所以要在加载完成后渲染
            renderer.render(scene, camera);
        });

        // 创建相机
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // camera.position.z = 3;
        // camera.position.z = 30;
        camera.position.set(5, 0, 5);
        camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        // 创建cube1
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);

        // 创建cube2
        const cubeGeometry2 = new THREE.BoxGeometry(1, 1, 1);
        const cubeMaterial2 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
        scene.add(cube2);
        cube2.position.x = 1;


        // renderer.render(scene, camera);

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();


    </script>
</body>

</html>